<template>
  <div>
    <TodoList v-if="name === 'todolist'" />
    <Message v-if="name === 'message'" />
    <NormalButton v-if="name === 'button'" />
    <Count v-if="name === 'count'" />
    <NormalModal v-if="name === 'modal'" />
  </div>
</template>

<script lang="ts">
import { useRoute } from "vue-router";

import TodoList from "./components/TodoList.vue";
import Message from "./components/Message.vue";
import NormalButton from "./components/NormalButton.vue";
import Count from "./components/Count.vue";
import NormalModal from "./components/NormalModal.vue";

export default {
  components: {
    TodoList,
    Message,
    NormalButton,
    Count,
    NormalModal,
  },

  setup() {
    const route = useRoute();
    const {
      params: { name },
    } = route;

    return {
      name,
    };
  },
};
</script>